<!--
 * @Author: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @Date: 2025-05-24 11:27:13
 * @LastEditors: wb_wangjiudeng wb_wangjiudeng@tcl.com
 * @LastEditTime: 2025-05-24 15:52:57
 * @FilePath: \iam-ui\iam-ui\src\components\echarts\index.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2025 by user.email, All Rights Reserved. 
-->

<template>
  <div class="chart-container">
    <div ref="chartRef" class="echart"></div>
    <div class="legend-list">
      <div v-for="(item, idx) in chartData" :key="item.name" class="legend-item">
        <span class="legend-dot" :style="{ background: colors[idx] }"></span>
        <span class="legend-name">{{ item.name }}</span>
        <span class="legend-value">{{ item.value }}</span>
        <span class="legend-percent">{{ getPercent(item.value) }}</span>
      </div>
    </div>
    <div class="center-text">
      <div class="center-title">工单数</div>
      <div class="center-value">{{ total }}</div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
const colors = [
  '#4ea6f5', // 噪音
  '#3ecb98', // 卫生
  '#f6c44f', // 食品安全
  '#f16c6c', // 划痕
  '#b07cf7', // 证件
  '#4ecbcb', // 其他
]
const chartData = [
  { name: '噪音', value: 44 },
  { name: '卫生', value: 24 },
  { name: '食品安全', value: 20 },
  { name: '划痕', value: 12 },
  { name: '证件', value: 11 },
  { name: '其他', value: 11 },
]
const total = chartData.reduce((sum, item) => sum + item.value, 0)

const getPercent = (val) => {
  if (!total) return '0%'
  return Math.round((val / total) * 100) + '%'
}

onMounted(() => {
  nextTick(() => {
    const myChart = echarts.init(chartRef.value)
    myChart.setOption({
      color: colors,
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c} ({d}%)',
      },
      series: [
        {
          type: 'pie',
          radius: ['65%', '85%'],
          center: ['35%', '50%'],
          avoidLabelOverlap: false,
          label: { show: false },
          labelLine: { show: false },
          data: chartData,
        },
      ],
    })
  })
})
</script>

<style scoped>
.chart-container {
  display: flex;
  align-items: center;
  position: relative;
  width: 500px;
  height: 220px;
}
.echart {
  width: 220px;
  height: 220px;
}
.legend-list {
  margin-left: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.legend-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  font-size: 15px;
}
.legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 8px;
}
.legend-name {
  width: 70px;
  margin-right: 8px;
}
.legend-value {
  width: 30px;
  margin-right: 8px;
  text-align: right;
}
.legend-percent {
  width: 30px;
  color: #888;
  text-align: right;
}
.center-text {
  position: absolute;
  left: 80px;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  pointer-events: none;
}
.center-title {
  font-size: 16px;
  color: #888;
}
.center-value {
  font-size: 28px;
  font-weight: bold;
  color: #222;
}
</style>
